<template>
  <div class="news">
    <div class="wap-common-title">
      <h1>获奖作品</h1>
      <p>China New Information Consumption Competition News</p>
    </div>
    <div class="news-list" v-if="worksList.length > 0">
      <div
        class="news-item"
        v-for="item in worksList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <h1 class="one-write">
          {{ item.title }}
        </h1>
        <span>{{ dayjs(item.created_at * 1000).format("YYYY-MM-DD") }}</span>
        <p class="two-write">{{ item.sub_title }}</p>
        <el-image
          style="width: 100%; height: auto"
          :src="item.pic_url"
          fit="cover"
        ></el-image>
      </div>
    </div>
    <div class="no-data" v-else>暂无数据哦~</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "news",
  components: {},
  data() {
    return {
      page: 1,
      perPage: 100,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["getWorksList"]),
    init() {
      this.getList();
    },
    getList() {
      let data = {
        per_page: this.perPage,
        page: this.page,
      };
      this.getWorksList(data);
    },
    goDetail(id) {
      this.$router.push({
        name: "wap-works-show",
        query: { id: id },
      });
    },
  },
  computed: {
    ...mapGetters([
      "worksList",
    ]),
  },
  watch: {
    $route(to) {
      this.categoryId = to.query.category_id;
      this.categoryName = to.query.category_name;
      this.getList();
    },
  },
};
</script>
<style scoped>
.news {
  box-sizing: border-box;
  padding: 20px 15px;
}
.news-list {
  padding-top: 20px;
}
.news-item {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  margin-bottom: 20px;
}
.news-list h1 {
  font-size: 15px;
  color: #333;
}
.news-list span {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #999999;
}
.news-list p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #666;
  margin-top: 10px;
}
.no-data {
  font-size: 16px;
  color: #999;
  text-align: center;
  height: 200px;
  line-height: 200px;
}
</style>